<template>
  <div class="bill">
	<!-- <mt-header title="我的收益" fixed>
	<router-link to="/mine" slot="left">
		<mt-button icon="back"></mt-button>
	</router-link>
	</mt-header> -->
  <header-bar :text="title" :left="left" ></header-bar>
<div class="billallList"
  v-if="list.length > 0"
  v-infinite-scroll="loadMore"
  :infinite-scroll-distance="pageSize">
<div class="bill-list" v-for="(item, key) in list" :key="key" style="height:73px;padding:0px;">
  <div class="bill-head">
		<div class="bill-head-r">
			<div class="bill-head-r-p">
				<div>{{item.name}}</div>
				<div>
					<span style="color:#EC5757">{{item.lockValue}}</span>
				</div>
			</div>
			<div class="bill-head-r-p">
				<span style="color:#888">锁仓&nbsp;{{item.lockValue}}</span>
				<span  style="color:#888">
					{{item.profitValue}}
				</span>
			</div>
		</div>
    
  </div>
</div>
</div>
  <div class="noData" v-else>暂无数据</div> 
  </div>
</template>
<script>
import {
  Header,
  CellSwipe,
  InfiniteScroll,
  Toast,
  Indicator,
  MessageBox
} from "mint-ui";
import moment from "moment";
import { transactList } from "../api/api.js";
import headerBar from './main/header'
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Bill",
  data() {
    return {
      msg: "",
      list: [
      ],
      pageNum: 1,
      pageSize: 5,
      title: "理财收益",
      left: {
          status: true
      },
    };
  },
  computed:{
    ...mapState([
      "pageInfo"
    ])
  },
  components:{
    headerBar
  },
  methods: {
    getTransactList(p) {
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : "",
        id: sessionStorage.getItem("user")
          ? JSON.parse(sessionStorage.getItem("user")).id
          : "",
        pageNum: p,
        pageSize: this.pageSize
      };
      transactList(para)
        .then(res => {
          Indicator.close();
          if (res.code !== 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
          } else {
            for (var i = 0; i < res.data.length; i++) {
              res.data[i].payTime = moment(
                new Date(res.data[i].payTime)
              ).format("MM-DD HH:mm");
            }
            if (this.list == "") {
              this.list = res.data;
            } else {
              this.list = this.list.concat(res.data);
            }
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    loadMore() {
      // Indicator.open("加载中...");
      this.pageNum = this.pageNum + 1;
      // this.getTransactList(this.pageNum);
    },
    initList(){
		let arr = [];
        for(var i in this.pageInfo.userinfo.coinData){
			arr.push({
				name:i,
				lockValue:this.pageInfo.userinfo.coinData[i].lockValue,
				profitValue:this.pageInfo.userinfo.coinData[i].profitValue,
				// inviteProfitValue:this.pageInfo.userinfo.coinData[i].inviteProfitValue
			})
		}
		this.list = arr;
    }
  },
  mounted() {
    // this.getTransactList(1);
  },
  created(){
    this.initList();
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/bill.css");
</style>
